<template>
  <div class="records-block">
    <div
      v-for="(item, key) in records"
      :key="key"
      class="records-item"
    >
      <div class="key">{{ item.name }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecordsBlock',
  props: {
    records: {
      type: Array,
      required: true,
      validator: function(value) {
        return value.every(item => typeof item === 'object' && item !== null)
      }
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.records-block {
  padding: 10px 20px;
  .records-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .key {
      width: 90px;
      color: #99a9bf;
    }

    .value {
      color: #333;
    }
  }
}
</style>
